<template>
	<view class="container">
		<view style="width:100%">
			<u-navbar
			    leftText="餐厅"
			    :title="rname"
			    :safeAreaInsetTop="false"
				@leftClick="backPage"
				@rightClick = "allShop"
			>
			    <view
			        class="u-nav-slot"
			        slot="left"
			    >
			        <u-icon
			            name="list"
			            size="19"
			        ></u-icon>
			    </view>	
				<view
					class="u-nav-slot"
					slot="right"
				>
					<u-icon
					    name="grid"
					    size="19"
					></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- 店铺页面组件 -->
		<view class="search-input">
			<icon type="search" size="15" style="padding-top:15rpx"/>
			<input class="search" @confirm="searchData" type="text" v-model="dname" confirm-type="search" placeholder="请输入商品" />
			<icon type="clear" size="15" @click="clearSearch" style="padding-top:15rpx;flex:1;text-align: right;"/>
		</view>
		
		<view class="catecss">
			<u-tabs :current="cindex" scrollable :list="cateList" @click="tabClick"></u-tabs>
			<!-- <picker mode="selector" @change="bindPickerChange" :range="cateList" :value="cindex" class="cateitem">
				<view class="diacss">
					<view>{{goodstypename}}</view>
					<u-icon name="arrow-down" />
				</view>
			</picker> -->
			<!-- <view  wx:if="{{restaurantInfo.length>1}}" class="cateitem" bindtap="openStatePopur2">{{rantName}}<van-icon name="arrow-down" /></view> -->
		</view>
		<Page ref="mySon"/>
		
		<u-picker :show="showShopPop" :columns="shopListNames" title="档口" closeOnClickOverlay @cancel="onClose2"  @confirm="confirm2"></u-picker>
		 <u-picker ref="uPicker" :show="rantCate" :columns="columns"  title="餐厅" @cancel="onClose1"  @confirm="confirm" @change="changeHandler"></u-picker>
	</view>
</template>

<script>
	import Config from '@/util/index.js'
	import Page from '../../components/goods.vue'
	import {
	 getGoodsType,getShopIfoBytel
	} from '@/api/goods'
	import {
	 getTreeData
	} from '@/api/user'
	export default {
		components: {
			Page
		},
		data() {
			return {
				// 页面参数
				options: {},
				// 页面属性
				page: {},
				columns: [[],[]],
				scolArr:[[],[]],
				total: 0,
				cindex: 0,
				rantCate:false,
				showCate: false,
				nodata:false,
				goodstypename: '分类',
				// 页面元素
				items: [],
				columnData: [[]],
				uploadFilePath:'',
				scode: '',
				rcode: '',
				rname: '',
				dname: '',
				dtype: '',
				shopList:[],
				deptArr:[[]],
				moreData:false,
				cateList: [],
				shopListNames:[[]],
				condition: '',
				bannerList: [],
				optionsCate: [],
				vcode: '',
				showShopPop:false,
				pagenum: 1,
				pagesize: 10,
				pageParams: {}
			}
		},
		onLoad(options){
			let _this = this
			uni.getStorage({
				key: 'deptdas',
				success: function (res) {
					let depts = JSON.parse(res.data)
					_this.rname = depts.dname
					_this.rcode = depts.rcode
				}
			});		
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			this.uploadFilePath = Config.get('apiUrl')
			this.getCate()
		},
		onReachBottom() {
			this.pagenum++
			this.$refs.mySon.getPageData(this.dname,this.dtype,"",this.pagenum,this.pagesize);
		},
		methods: {
			/**
			 * 生命周期函数--监听页面加载
			 */
			bindPickerChange(e) {
				this.cindex = e.detail.value
				this.dtype = this.optionsCate[this.cindex].value
				this.goodstypename = this.optionsCate[this.cindex].text
				this.pagenum = 1
				this.$refs.mySon.getPageData(this.dname,this.dtype,"",this.pagenum,this.pagesize);
			},
			allShop(){
				let params = {
					deptId:this.rcode
				}
				getShopIfoBytel(params).catch(res => {
					console.log("2233",res)
					if(res.data.code==200){
						this.shopList = res.data.rows
						res.data.rows.forEach(item=>{
							this.shopListNames[0].push(item.shopName)
						})
						this.showShopPop = true
					}
				})
					
			},
			confirm2(e){
				let name = e.value[0]
				console.log("name",name)
				this.pagenum = 1
				this.showShopPop = false
				this.$refs.mySon.getPageData("","",name,1,10);
			},
			onClose1(){
			    this.rantCate=false
			},
			onClose2(){
			    this.showShopPop=false
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1,this.columnData[e.index])
				}
			},
			async initData(){
				let params = {pageNum:1,pageSize:50}
				try{
					let data = await getTreeData(params)
				}catch(response){
					if(response.data){
						this.scolRentData = response.data.school
						let scoldata = response.data.school
						let arr = []
						scoldata.forEach((item,index)=>{
							this.columns[0].push(item.schoolName)
							this.scolArr[0].push(item.schoolId)
							this.columnData[index] = []
							this.deptArr[index] = []
							item.rest.forEach((it,idx)=>{
								if(index==0){
									this.columns[1].push(it.deptName)
									this.scolArr[1].push(it.deptId)
								}								
								this.columnData[index].push(it.deptName)
								this.deptArr[index].push(it.deptId)
							})
						})
						this.rantCate = true
					}
				}
			},
			confirm(e) {
				let idxs = e.indexs
				this.scode = this.scolArr[0][idxs[0]]
				this.rcode = this.deptArr[idxs[0]][idxs[1]]
				this.rname = this.columnData[idxs[0]][idxs[1]]
				let deptDas = {
					scode:this.scode,
					rcode:this.rcode,
					dname:this.rname
				}
				let _this = this
				uni.setStorage({
					key: 'deptdas',
					data: JSON.stringify(deptDas),
					complete: function () {
						_this.rantCate = false
						_this.pagenum = 1
						_this.$refs.mySon.getPageData("","","",1,10);						
					}
				});
			},
			backPage(){
				this.initData()
			},
			tabClick(val){
				this.cindex = val.value
				this.dtype = this.optionsCate[this.cindex].value
				this.goodstypename = this.optionsCate[this.cindex].text
				this.pagenum = 1
				this.$refs.mySon.getPageData(this.dname,this.dtype,"",this.pagenum,this.pagesize);
			},
			clearSearch(){
				this.dname=""
				this.pagenum = 1
				this.$refs.mySon.getPageData(this.dname,this.dtype,"",this.pagenum,this.pagesize);
			},
			searchData(){
				this.items = []
				this.pagenum = 1
				this.$refs.mySon.getPageData(this.dname,this.dtype,"",this.pagenum,this.pagesize);
			},
			
			/**
			 * 加载页面数据
			 * @param {Object} callback
			 */
			getCate() {
				const app = this
				getGoodsType().catch(result => {
					let type = []
					result.data.rows.map(item => {
						let obj = {}
						obj.name = item.dtypeName
						app.cateList.push(obj)
						obj.value = item.dtype
						type.push(obj)
					})
					app.optionsCate = type
				})
			},
			/**
			 * 设置顶部导航栏
			 */
			setPageBar() {
				const {
					page
				} = this
				// 设置页面标题
				uni.setNavigationBarTitle({
					title: "首页"
				});
				// 设置navbar标题、颜色
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#EEEEEE'
				})
			},
		},

		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			this.pagenum = 1
			this.$refs.mySon.getPageData("","","",1,10);
		}
	}
</script>

<style scoped>
	.diacss {
		display: flex;
		align-items: center;
		width: 15%;
		margin: auto;
	}
	.search{height:60rpx;line-height: 60rpx;color:#000}
	.swiper-box{width:100%;height:400rpx;}
	.slide-image {
	    width: 100%;
	    height: 400rpx;
	}
	.cateitem {
		flex: 1;
		text-align: center;
		height: 100rpx;
		line-height: 100rpx;
		background: #fff
	}
	.search-input {
	  color: #999;
	  padding: 20rpx;
	  background: #f1f1f2;
	  display: flex;
	}
	 .search-input .search-icon {
	    margin-right: 8rpx;
	  }
	.catecss {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx
	}
</style>
